		* {
			box-sizing: border-box;
			margin: 0px;
			padding: 0px;
			touch-action: none;
		}
		
		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
		#main {
			width: 100%;
			height: 100%;
		}
		#loading{
			z-index: 1000;
		}
		#outside {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 930;
		}
		
		#outside>img {
			width: 100%;
			height: 100%;
		}
		
		.blue-bg {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		
		.blue-bg>img {
			width: 100%;
			height: 100%;
		}
		
		.home-page {
			width: 100%;
			height: 100%;
		}
		
		.home-page>:first-child {
			width: 100%;
			height: 100%;
			z-index: 500;
		}
		
		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		
		.star {
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-animation-duration: 5s;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.caseone {
			position: relative;
			top: 0px;
			left: 0px;
		}
		
		.caseone>:first-child {
			width: 100%;
			height: 100%;
		}
		
		.Arrow {
			width: 40px;
			position: absolute;
			top: 48%;
			left: 50%;
			margin-left: 15px;
			z-index: 960;
			-webkit-animation-duration: 2s;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.bigmouse {
			z-index: 950;
			position: absolute;
			width: 50%;
			top: 33%;
			left: 25%;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.bigmouse>img {
			width: 100%;
		}
		
		.smallmouse {
			position: absolute;
			width: 80%;
			top: 23%;
			left: 10%;
			-webkit-animation-duration: 1s;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.smallmouse>img {
			width: 100%;
		}
		
		.caseone-enter-active,
		.caseone-leave-active {
			transition: opacity .5s
		}
		
		.caseone-enter,
		.caseone-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casetwo-enter-active,
		.casetwo-leave-active {
			transition: opacity .5s
		}
		
		.casetwo-enter,
		.casetwo-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.hand {
			position: absolute;
			width: 15%;
			top: 40%;
			right: 10%;
			z-index: 500;
			-webkit-animation-duration: 2s;
			-webkit-animation-iteration-count: 100;
		}
		
		.firstthing {
			width: 80%;
			position: absolute;
			top: 0px;
			left: 10%;
			z-index: 500;
		}
		
		.firstthingshow-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.firstthingshow-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.handtop {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 90%;
			z-index: 500;
		}
		
		.handbottom {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 90%;
			z-index: 500;
		}
		
		.handtopshow-enter-active {
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			position: absolute;
		}
		
		.handtopshow-enter {
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes mymove {
			from {
				top: -50px;
			}
			to {
				top: 0px;
			}
		}
		
		.handbottomshow-enter-active {
			animation: mybottom 6s infinite;
			-webkit-animation: mybottom 6s infinite;
			position: absolute;
		}
		
		.handbottomshow-enter {
			animation: mybottom 6s infinite;
			-webkit-animation: mybottom 6s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes mybottom {
			from {
				bottom: -50px;
			}
			to {
				bottom: 0px;
			}
		}
		
		.text1 {
			position: absolute;
			width: 50%;
			top: 67%;
			left: 25%;
			z-index: 900;
		}
		
		.text1show-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.text1show-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casethree-enter-active,
		.casethree-leave-active {
			transition: opacity .5s
		}
		
		.casethree-enter,
		.casethree-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casethreetop {
			position: absolute;
			top: 2%;
			right: 5%;
			width: 75%;
			z-index: 500;
		}
		
		.casethreebottom {
			position: absolute;
			bottom: 5%;
			left: 4%;
			width: 90%;
			z-index: 500;
		}
		
		.casethreetop-enter-active {
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			position: absolute;
		}
		
		.casethreetop-enter {
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes mymove {
			from {
				top: -50px;
				opacity: 0;
			}
			to {
				top: 0px;
				opacity: 1;
			}
		}
		
		.casethreebottom-enter-active {
			animation: mybottom 6s infinite;
			-webkit-animation: mybottom 6s infinite;
			position: absolute;
		}
		
		.casethreebottom-enter {
			animation: mybottom 6s infinite;
			-webkit-animation: mybottom 6s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes mybottom {
			from {
				bottom: -50px;
				opacity: 0;
			}
			to {
				bottom: 0px;
				opacity: 1;
			}
		}
		
		.text2 {
			position: absolute;
			width: 55%;
			top: 67%;
			left: 25%;
			z-index: 900;
		}
		
		.text2show-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.text2show-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casefour-enter-active,
		.casefour-leave-active {
			transition: opacity .5s
		}
		
		.casefour-enter,
		.casefour-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casefourthing {
			width: 90%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 500;
		}
		
		.casefourthing-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.casefourthing-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casefourleft {
			position: absolute;
			top: 20%;
			left: 0px;
			width: 35%;
			z-index: 500;
		}
		
		.casefourright {
			position: absolute;
			bottom: 20%;
			right: 0px;
			width: 35%;
			z-index: 500;
		}
		
		.casefourleft-enter-active {
			animation: casefourleft 5s infinite;
			-webkit-animation: casefourleft 5s infinite;
			position: absolute;
		}
		
		.casefourleft-enter {
			animation: casefourleft 5s infinite;
			-webkit-animation: casefourleft 5s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes casefourleft {
			from {
				top: -500px;
				opacity: 0;
			}
			to {
				top: 20%;
				opacity: 1;
			}
		}
		
		.casefourright-enter-active {
			animation: casefourright 6s infinite;
			-webkit-animation: casefourright 6s infinite;
			position: absolute;
		}
		
		.casefourright-enter {
			animation: casefourright 6s infinite;
			-webkit-animation: casefourright 6s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes casefourright {
			from {
				bottom: -500px;
				opacity: 0;
			}
			to {
				bottom: 20%;
				opacity: 1;
			}
		}
		
		.text4 {
			position: absolute;
			width: 65%;
			top: 73%;
			left: 20%;
			z-index: 900;
		}
		
		.text4show-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.text4show-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casefive-enter-active,
		.casefive-leave-active {
			transition: opacity .5s
		}
		
		.casefive-enter,
		.casefive-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.casefiveself {
			position: absolute;
			width: 39%;
			top: 6%;
			left: 30%;
			z-index: 700;
		}
		
		.casefiveaunt1 {
			position: absolute;
			width: 70%;
			top: 12%;
			left: 18%;
			z-index: 500;
		}
		
		.casefiveaunt2 {
			position: absolute;
			width: 95%;
			top: 18%;
			left: 2%;
			z-index: 600;
		}
		
		.casefiveaunt1-enter-active {
			animation: casefiveaunt1 5s infinite;
			-webkit-animation: casefiveaunt1 5s infinite;
		}
		
		.casefiveaunt1-enter {
			animation: casefiveaunt1 5s infinite;
			-webkit-animation: casefiveaunt1 5s infinite;
		}
		
		@-webkit-keyframes casefiveaunt1 {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.casefiveaunt2-enter-active {
			animation: casefiveaunt2 6s infinite;
			-webkit-animation: casefiveaunt2 6s infinite;
		}
		
		.casefiveaunt2-enter {
			animation: casefiveaunt2 6s infinite;
			-webkit-animation: casefiveaunt2 6s infinite;
		}
		
		@-webkit-keyframes casefiveaunt2 {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.text5 {
			position: absolute;
			width: 65%;
			top: 76%;
			left: 20%;
			z-index: 900;
		}
		
		.text5show-enter-active {
			opacity: 1;
			-webkit-transition: opacity 5s;
		}
		
		.text5show-enter
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
		
		.home-page-casesix {
			width: 100%;
			height: 100%;
		}
		
		.casesix {
			position: absolute;
			width: 70%;
			top: 6%;
			left: 23%;
			z-index: 700;
		}
		
		.casesix-text {
			position: absolute;
			width: 65%;
			top: 76%;
			left: 20%;
			z-index: 900;
		}
		
		.casesix-enter-active {
			animation: casesix 6s infinite;
			-webkit-animation: casesix 6s infinite;
		}
		
		.casesix-enter {
			animation: casesix 6s infinite;
			-webkit-animation: casesix 6s infinite;
		}
		
		@-webkit-keyframes casesix {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.casesix-leave-active {
			animation: casesixleave 6s infinite;
			-webkit-animation: casesixleave 6s infinite;
			position: absolute;
		}
		
		.casesix-leave {
			animation: casesixleave 6s infinite;
			-webkit-animation: casesixleave 6s infinite;
			position: absolute;
		}
		
		@-webkit-keyframes casesixleave {
			from {
				top: 6%;
			}
			to {
				top: -100%;
			}
		}
		
		.caseseven-enter-active {
			animation: caseseven 6s infinite;
			-webkit-animation: caseseven 6s infinite;
		}
		
		.caseseven-enter {
			animation: caseseven 6s infinite;
			-webkit-animation: caseseven 6s infinite;
		}
		
		@-webkit-keyframes caseseven {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.text7 {
			position: absolute;
			width: 70%;
			top: 59%;
			left: 23%;
			z-index: 950;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.text7>img {
			width: 100%;
			z-index: 950;
		}
		
		.laststar {
			position: absolute;
			width: 100%;
			top: 0;
			z-index: 900;
			-webkit-animation-duration: 2s;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}
		
		.laststar>img {
			width: 100%;
		}
		
		.text8 {
			position: absolute;
			width: 60%;
			top: 62%;
			left: 21%;
			z-index: 900;
		}
		
		.lastbutton {
			position: absolute;
			width: 60%;
			top: 75%;
			left: 20%;
			z-index: 1000;
			-webkit-animation-iteration-count: 100; //动画执行次数
		}